<template>
	<div class="comprehensivestatistics_middle">
		<!--综合统计-->
		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
		
		
		<div style="margin:5px 0px 0px 0px;padding: 20px;">
			<Row >
		        <Col span="24" style="text-align: left;">
					<span style="font-size: 18px;color: #1a1a1a;font-weight: 540;">考试名称:{{examName}}</span>
				</Col>
			</Row>
			<Row style="margin:15px 0px 0px 0px;color: #666666;">
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">入学年份：{{enrolYear}}</span>
				</Col>
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">学年：{{schoolYear}}</span>
				</Col>
		        <Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">年级：{{gradeName}}</span>
				</Col>
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">考试时间：{{examDate}}</span>
				</Col>
			</Row>
		</div>
		<hr style="margin:0px 40px 0px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
		
		
		<Row style="padding:35px 40px 0px 45px;">
	        <Col span="6" style="text-align: left;">
	        	<span style="font-size: 14px;">科目:</span>
			    <Select v-model="scoreCategorySelect" style="width:150px;text-align: center;">
			        <Option v-for="item in scoreCategoryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			    </Select>
	        </Col>
	    
	        <Col span="6" style="text-align: left;">
	        	<span style="font-size: 14px;">班级:</span>
			    <Select v-model="classselect" style="width:150px;text-align: center;">
			        <Option v-for="item in classlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
			    </Select>
	        </Col>
	    </Row>
	    <Row style="text-align: left;margin-top: 41px;">
			<span style="border-left: 5px solid #517EDB;font-size: 14px;"></span>
			<span style="font-size: 18px;margin-left: 10px;">考试成绩分析</span>
		</Row >
	    <!--<hr style="margin:20px 0px 0px 105px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />-->
	    <div v-for="item in BasicInfo">
	    	<Row style="padding:15px 15px 15px 15px;">
		        <Col span="4" style="text-align: center;padding: 5px;">
		        	<div style=";height: 30px;line-height: 30px;">
		        		<span style="font-size: 19px;color: #ff9900;">{{item.maxResult}}</span><br />最高分
		        	</div>
		        </Col>
		        <Col span="4" style="text-align: center;padding: 5px;">
		        	<div style=";height: 30px;line-height: 30px;">
		        		<span style="font-size: 19px;color: #ff9900;">{{item.minResult}}</span><br />最低分
		        	</div>
		        </Col>
		        <Col span="4" style="text-align: center;padding: 5px;">
		        	<div style=";height: 30px;line-height: 30px;">
		        		<span style="font-size: 19px;color: #ff9900;">{{item.average}}</span><br />平均分
		        	</div>
		        </Col>
		        <Col span="4" style="text-align: center;padding: 5px;">
		        	<div style=";height: 30px;line-height: 30px;">
		        		<span style="font-size: 19px;color: #ff9900;">{{item.excellentRate}}%</span><br />优秀率
		        	</div>
		        </Col>
		        <Col span="4" style="text-align: center;padding: 5px;">
		        	<div style=";height: 30px;line-height: 30px;">
		        		<span style="font-size: 19px;color: #ff9900;">{{item.passRate}}%</span><br />及格率
		        	</div>
		        </Col>
		        <Col span="4" style="text-align: center;padding: 5px;">
		        	<div style=";height: 30px;line-height: 30px;">
		        		<span style="font-size: 19px;color: #ff9900;">{{item.lowScoreRate}}%</span><br />低分率
		        	</div>
		        </Col>
		    </Row>
	    </div>
	    <hr style="margin:20px 40px 0px 20px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
	    <Row style="text-align: left;margin-top: 41px;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">各分数段人数</span>
		</Row >
        <Row  style="text-align: left;margin-top: 5px;margin-bottom: 50px;">
			<div id="myChart" ref="scorePie" :style="{width: '95%', height: '450px'}"></div>
		</Row >
	   
	    
	    <div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
	    <Row style="text-align: left;margin-top: 41px;">
			<span style="border-left: 5px solid #517EDB;font-size: 14px;"></span>
			<span style="font-size: 18px;margin-left: 10px;">成绩列表</span>
		</Row >
	    <div style="min-height: 300px;">
			<Row style="margin:0 auto;margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:5px;color: #666666;border-radius: 12px;background-color: #f0f8ff;">
		        <Col span="2" style="text-align: center;">
					<span style="font-size: 16px;">班级</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">学号</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">姓名</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">分数</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">等级分数</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">等级</span>
				</Col>
				<Col span="3" style="text-align: center;">
					<span style="font-size: 16px;">班级排名</span>
				</Col>
				<Col span="4" style="text-align: center;">
					
					<Row>
						<Col span="18" style="text-align: center;">
							<span style="font-size: 16px;">年段排名</span>
						</Col>
						<Col span="6" style="text-align: left;">
							<!--<span style="font-size: 16px;">{{item.gradeRanking}}&nbsp;</span>-->
						</Col>
					</Row>
				</Col>
			</Row>
			<Row class="hoverclass" v-for="item in sutdentResult" :key="item.subjectName" style="margin:0 auto;color: #666666;margin: 5px 20px 5px 20px;padding:5px 0px 5px 0px;border-bottom: 1px solid rgb(240, 248, 255);">
				<div @click="goQueryDetailed(item.analysisId,item.studentId,item.className,item.studentNo,item.studentName)" style="cursor: pointer;">
			        <Col span="2" style="text-align: center;">
						<span style="font-size: 16px;">{{item.className}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.studentNo}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.studentName}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.score}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.cmepResult}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.level}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">{{item.classRanking}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;">
						<Row>
							<Col span="18" style="text-align: center;">
								<span style="font-size: 16px;">{{item.gradeRanking}}&nbsp;</span>
							</Col>
							<Col span="6" style="text-align: left;">
								<i class="iconfont alicon-enter"></i>
							</Col>
						</Row>
						
					</Col>
				</div>
			</Row>
	    </div>
	    <Page style="text-align: center;margin-top:15px;margin-bottom: 15px;" :current="current" :total="recordCount" @on-change="pageChange"/>
	</div>
</template>

<script>
	import api from "@/components/js/Apidomain.js"
	import { setsessionstorage,getsessionstorage } from '@/components/js/Localstorage'
	export default{
		name: 'ComprehensiveStatistics_middle_keep_alive',
		data(){
			return{
				examName:"",
				enrolYear:"",
				schoolYear:"",
				gradeName:"",
				examDate:"",
				
				checkAll: false,
				scoreCategorySelect:"",			//成绩类别
				classselect:"",				//选择班级的select
				
				current:1,					//页码
				recordCount:0,				//总条数
				
				scoreCategoryList:[],
				classlist: [],
                BasicInfo:[],
                scorePie_Data:{
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '2%',
				        right: '2%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				        	splitLine:{show: false},//去除网格线
				            type : 'category',
				            data : "",
//				            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				            axisTick: {
				                alignWithLabel: true
				            },
				            axisLabel: {
                                           interval:0,
                                           rotate:-40
                                       }
				            
				        }
				    ],
				    yAxis : [
				        {
				        	name : '人数',
//				        	splitLine:{show: false},//去除网格线
				            type : 'value',
				            axisLabel:{
				            	textStyle: {
			                    	fontSize: 16 ,
			                   	},
				            	formatter:'{value}'
				            },
				            
				        }
				    ],
				    series : [
				        {
				            name:'数据',
				            type:'bar',
				            barWidth: '20%',
				            data:"",
//				            data:[10, 52, 200, 334, 390, 330, 220,100, 152, 200, 334, 390, 330, 220]
							label: {
					            "normal": {
					                "show": true,
					                "textStyle": {
					                    "fontSize": 12
					                },
					                formatter:'{c}人'
					            },
							},
				        }
				    ]
				},
//              scorePie_Data:{
//				    title: {
//				        text: '各分数段人数及占比',
////				        subtext: '虚构数据',
//				        left: 'left',
//				        textStyle:{
//				        	fontSize:"14",
//				        }
//				    },
//				    tooltip : {
//				        trigger: 'item',
//				        formatter: "{a} <br/>{b} : {c}人 ({d}%)"
//				    },
//				    legend: {
//				        // orient: 'vertical',
//				        // top: 'middle',
//				        bottom: 10,
//				        left: 'center',
//				        data: "",
////				        data: ['西凉', '益州','兖州','荆州','幽州']
//						
//				    },
//				    series : [
//				        
//				        {
//				        	name:'人数',
//				            type: 'pie',
//				            radius: ['25%', '40%'],
//				             center: ['50%', '45%'],
//				            selectedMode: 'single',
//				            label: {
//				                normal: {
//				                    formatter: '{per|{d}%}\n \n  {b|{b}：}{c}人',
//				                    rich: {},
//				                    textStyle: {
//					                    "fontSize": 12
//					                }
//				                }
//				            },
//				            data:[
////				                {value:1548,name: '幽州'},
////				                {value:535, name: '荆州'},
////				                {value:510, name: '兖州'},
////				                {value:634, name: '益州'},
////				                {value:735, name: '西凉'}
//				            ],
//				            itemStyle: {
//				                emphasis: {
//				                    shadowBlur: 10,
//				                    shadowOffsetX: 0,
//				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
//				                }
//				            }
//				        }
//				    ]
//				},
				levelPie_Data:{
				    title: {
				        text: '各等级人数及占比',
//				        subtext: '虚构数据',
				        left: 'left',
				        textStyle:{
				        	fontSize:"14",
				        }
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c}人 ({d}%)"
				    },
				    legend: {
				        // orient: 'vertical',
				        // top: 'middle',
				        bottom: 10,
				        left: 'center',
				        data: "",
				        data: ['西凉', '益州','兖州','荆州','幽州']
						
				    },
				    series : [
				        
				        {
				        	name:'人数',
				            type: 'pie',
				            radius: ['25%', '40%'],
				             center: ['50%', '45%'],
				            selectedMode: 'single',
				            label: {
				                normal: {
				                    formatter: '{per|{d}%}\n \n  {b|{b}：}{c}人',
				                    rich: {},
				                    textStyle: {
					                    "fontSize": 12
					                }
				                }
				            },
				            data:[
				                {value:1548,name: '幽州'},
				                {value:535, name: '荆州'},
				                {value:510, name: '兖州'},
				                {value:634, name: '益州'},
				                {value:735, name: '西凉'}
				            ],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				},
				aPie_Data:{
				    title: {
				        text: '得A数人数及占比',
//				        subtext: '虚构数据',
				        left: 'left',
				        textStyle:{
				        	fontSize:"14",
				        }
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c}人 ({d}%)"
				    },
				    legend: {
				        // orient: 'vertical',
				        // top: 'middle',
				        bottom: 10,
				        left: 'center',
				        data: "",
				        data: ['西凉', '益州','兖州','荆州','幽州']
						
				    },
				    series : [
				        
				        {
				        	name:'人数',
				            type: 'pie',
				            radius: ['25%', '40%'],
				             center: ['50%', '45%'],
				            selectedMode: 'single',
				            label: {
				                normal: {
				                    formatter: '{per|{d}%}\n \n  {b|{b}：}{c}人',
				                    rich: {},
				                    textStyle: {
					                    "fontSize": 12
					                }
				                }
				            },
				            data:[
				                {value:1548,name: '幽州'},
				                {value:535, name: '荆州'},
				                {value:510, name: '兖州'},
				                {value:634, name: '益州'},
				                {value:735, name: '西凉'}
				            ],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				},
				sutdentResult:[]
			}
		},
//		computed: {
//			tabWidth: function() {
//				return {
//					width: document.documentElement.clientWidth - 320 +"px"
//				}
//			}
//		},
		created(){
			this.getscoreCategoryList()
			this.getclasslist()
			this.examName = getsessionstorage('quality_middle_examName')
			this.enrolYear = getsessionstorage('quality_middle_enrolYear')
			this.schoolYear = getsessionstorage('quality_middle_schoolYear')
			this.gradeName = getsessionstorage('quality_middle_gradeName')
			this.examDate = getsessionstorage('quality_middle_examDate')
		},
		mounted() {
//        	this.drawPie_scorePie();
//      	this.drawPie_levelPie();
//      	this.drawPie_aPie();
        },
		methods:{
			drawPie_scorePie() {
            	this.$nextTick(function () {
	                let myChart = this.$echarts.init(this.$refs.scorePie,'hengyi')
	                myChart.clear();
	                myChart.setOption(this.scorePie_Data);
                })
            },
            drawPie_levelPie() {
            	this.$nextTick(function () {
	                let myChart = this.$echarts.init(this.$refs.levelPie,'hengyi')
	                myChart.clear();
	                myChart.setOption(this.levelPie_Data);
                })
            },
            drawPie_aPie() {
            	this.$nextTick(function () {
	                let myChart = this.$echarts.init(this.$refs.aPie,'hengyi')
	                myChart.clear();
	                myChart.setOption(this.aPie_Data);
                })
            },
			//成绩类别改变触发函数
			scoreCategoryChangeSelect:function(){
				
			},
            //获取成绩类别列表
			getscoreCategoryList:function(){
//         		this.gradelistshow = true;
           		var self = this;
           		let sessionroleid = getsessionstorage('roleid');
           		let sessiongradeId = getsessionstorage('quality_middle_gradeId');
            	let url = api.apidomain+'/tqes/web/squaAnalysis/getQuerySubject';
            	this.$http.post(url, {"gradeId":sessiongradeId,"roleId":sessionroleid}).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						self.scoreCategoryList = response.data.data
						if(self.scoreCategoryList.length != 0){
							self.scoreCategorySelect = self.scoreCategoryList[0].value;
						}
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00258',
							duration: 10,
							closable: true
						});
					});
           	},
           	//获取班级级选择列表
           	getclasslist:function(){
//         		this.classlistshow = true;
				let sessiongradeId = getsessionstorage('quality_middle_gradeId');
				let sessionroleid = getsessionstorage('roleid');
           		var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysis/getQueryClasses';
            	this.$http.post(url, {"gradeId":sessiongradeId,"roleId":sessionroleid}).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						self.classlist = response.data.data
						if(self.classlist.length != 0){
							self.classselect = self.classlist[0].value;
						}
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00259',
							duration: 10,
							closable: true
						});
					});
           	},
           	//获取概况信息
            getBasicInfo: function() {
            	//console.log("jjj")
                var self = this;
                let sessiongradeId = getsessionstorage('quality_middle_gradeId');
                //console.log(sessiongradeId)
                let sessiongqualityanalysisId = getsessionstorage('quality_middle_analysisId');
                let url = api.apidomain + '/tqes/web/squaAnalysis/getSummaryStatistics';
                this.$http.post(url, {
                        "gradeId": sessiongradeId,
                        "classesId":this.classselect,
                        "subjectId":this.scoreCategorySelect,
                        "analysisId":sessiongqualityanalysisId
                    }).then(function(response) {
                        if(response.data.success == true) {
                            ////console.log(response.data.data)
                            if(response.data.data.maxResult == ""){
                            	self.BasicInfo = [{"maxResult": "-","minResult": "-","average": "-","excellentRate": "-","passRate": "-","lowScoreRate": "-"}]
                            }else{
                            	self.BasicInfo = [];
                            	self.BasicInfo.push(response.data.data)
                            }
                        } else if(response.data.success == false) {
                            self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
                        }

                    })
                    .catch(function(error) {
                        self.$Message.error({
							content: '系统发生错误：错误码00260',
							duration: 10,
							closable: true
						});
                    });
            },
            //获取饼图数据
			getpiechartdata:function(){
//				this.chartshow = true;
				let sessiongradeId = getsessionstorage('quality_middle_gradeId');
				let sessiongqualityanalysisId = getsessionstorage('quality_middle_analysisId');
				var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysis/getSummaryStatisticsColumnar';
            	this.$http.post(url, {"gradeId":sessiongradeId,//年级
									"classesId":this.classselect,//班级
									"subjectId":this.scoreCategorySelect,//科目
									"analysisId":sessiongqualityanalysisId,//分析分析id
									"type":"2",}).then(function(response) {
					if(response.data.success == true){
						////console.log(response.data.data)
						//由饼图改为柱状图
//						self.scorePie_Data.legend.data = response.data.data.name;
//						self.scorePie_Data.series[0].data = response.data.data.date;
						self.scorePie_Data.xAxis[0].data = response.data.data.nameList;
						self.scorePie_Data.series[0].data = response.data.data.valueList; 
						
//						//$nexttick为了使tch = true生效（dom）变化后再执行drawline，这样才不会有报错误
						self.$nextTick(function () {
							self.drawPie_scorePie()
						})
	            }else if(response.data.success == false){
	            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
//	            		self.chartshow = false;
	            	}
				})
				.catch(function(error) {
					self.$Message.error({
							content: '系统发生错误：错误码00261',
							duration: 10,
							closable: true
						});
//					self.chartshow = false;
				});
			},
			//获取成绩列表
			getResultListData:function(){
//				this.chartshow = true;
				let sessiongradeId = getsessionstorage('quality_middle_gradeId');
				let sessiongqualityanalysisId = getsessionstorage('quality_middle_analysisId');
				let sessiongqualitymiddlestudyYearSelect = getsessionstorage('quality_middle_studyYearSelect');
				var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysisScoreQuery/getStudentExamDetail';
            	this.$http.post(url, {"analysisId": sessiongqualityanalysisId,
									"classId": this.classselect,
									"dept": "Middle",
									"gradeId": sessiongradeId,
									"schoolYearStart": sessiongqualitymiddlestudyYearSelect,
									"subjectId": this.scoreCategorySelect,
									"current":this.current,	//----第几页
									"pageSize":"10"		//----一页条数
            	}).then(function(response) {
					if(response.data.success == true){
						//console.log(response.data.data.items)
						self.sutdentResult = response.data.data.items
						self.recordCount = response.data.data.recordCount
						if(self.sutdentResult.length == 0){
							self.textinfo = "查询信息为空"
						}
	            }else if(response.data.success == false){
	            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
	            	}
				})
				.catch(function(error) {
					self.$Message.error({
							content: '系统发生错误：错误码00262',
							duration: 10,
							closable: true
						});
				});
			},
			//查看学生的详细成绩
			goQueryDetailed:function(analysisId,studentId,className,studentNo,studentName){
				setsessionstorage('quality_middle_student_analysisId',analysisId);
				setsessionstorage('quality_middle_student_studentId',studentId);
				setsessionstorage('quality_middle_student_className',className);
				setsessionstorage('quality_middle_student_studentNo',studentNo);
				setsessionstorage('quality_middle_student_studentName',studentName);
				this.$router.push({name:'queryDetailedMiddle'})
			},
			pageChange:function(value){
        		this.current = value;
        		this.getResultListData()
        	},
		},
		watch:{
			classselect:function(){
				if(this.classselect != "" && this.scoreCategorySelect != ""){
					this.getBasicInfo()
					this.getpiechartdata()
					this.current = 1;
					this.getResultListData()
				}
			},
			scoreCategorySelect:function(){
				if(this.classselect != "" && this.scoreCategorySelect != ""){
					this.getBasicInfo()
					this.getpiechartdata()
					this.current = 1;
					this.getResultListData()
				}
			},
		}
	}
</script>

<style lang="css" scoped>
	.comprehensivestatistics_middle >>> .ivu-checkbox-group{
		display: inline-block;
	}
	.comprehensivestatistics_middle >>> .ivu-checkbox-group-item{
		display: inline-block;
    	font-size: 14px;
	}
	.comprehensivestatistics_middle >>> .hoverclass:hover{
		background-color:rgb(245, 245, 245);
	}
</style>